.header {
	box-shadow: 0 1px 2px 0 var(--jj-header-box-shadow);
}

.links-page-wrapper {
	margin-bottom: 20px;
}
.links-page-content {
	padding: 32px;
	background-color: var(--jj-links-bg);
	border-radius: 4px;
}
.links-page-head {
	margin-top: 40px;
	margin-bottom: 50px;
}
.links-page-title {
	font-size: 32px;
	font-weight: normal;
	text-align: center;
	color: var(--jj-links-title);
}
.links-edit-btn {
	font-size: 12px;
	color: var(--jj-links-edit-btn);
	text-decoration: none;
	margin-left: 8px;
	vertical-align: super;
	&:hover {
		text-decoration: underline;
	}
	&:active {
		opacity: 0.7;
	}
}
.links-page-body {
	ul,
	ol {
		text-align: center;
	}
	ul li,
	ol li {
		display: inline-block;
		margin: 0 8px 16px 8px;
		width: 180px;
		height: 84px;
		background-color: var(--jj-links-item-bg);
		box-shadow: inset 0 0 0 1px var(--jj-links-item-border);
		overflow: hidden;
		padding: 15px;
		position: relative;
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			vertical-align: top;
		}
		a {
			position: absolute;
			top: 5px;
			left: 5px;
			right: 5px;
			bottom: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			line-height: 1.5;
			text-decoration: none;
			color: var(--jj-links-item);
			background-color: var(--jj-links-bg);
			opacity: 0;
			transition: opacity 0.2s;
		}
		&:hover {
			box-shadow: inset 0 0 0 2px var(--jj-links-item-border-hover);
			img {
				display: none;
			}
			a {
				opacity: 1;
			}
		}
		&:active {
			opacity: 0.7;
		}
	}

	blockquote {
		margin: 60px 0 16px;
		padding: 15px;
		background-color: var(--jj-links-blockquote-bg);
		border-radius: 4px;
		font-size: 14px;
		line-height: 28px;
		color: var(--jj-links-blockquote);
		position: relative;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url("/static/images/links_info.png");
			background-repeat: no-repeat;
			background-position: right -15px top -15px;
			background-size: 90px 90px;
			opacity: 0.1;
			pointer-events: none;
		}
	}
}

@media screen and (max-width: 600px) {
	.links-page-content {
		padding: 24px 12px;
	}
	.links-page-head {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	.links-page-body {
		ul li,
		ol li {
			width: 80%;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 12px;
		}
	}
}

@media screen and (max-width: 420px) {
	.links-page-body {
		ul li,
		ol li {
			width: 100%;
		}
	}
}
